<template>
  <div class="sidebar">
    <div :class="[show ? 'activehome home' :'home']" @click="go_home">
      <i style="font-size:18px" class="el-icon-s-home"></i>
      <span>系统首页</span>
    </div>
    <el-container>
      <el-container class="container-body">
        <el-aside class="menu-container" style="width:201px">
          <el-menu
            :default-active="onRoutes"
            background-color="#0D4CA3"
            text-color="#fff"
            active-text-color="#fff"
            :collapse="collapse"
            router
            style="transition: none"
            :collapse-transition="true"
            id="important"
            @select="onselect"
            :unique-opened="true"
          >
            <menu-tree :menuData="this.menuList"></menu-tree>
          </el-menu>
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>
 
<script>
import MenuTree from ".//MentTree";
export default {
  props:["menuList"],
  components: {
    MenuTree,
  },
  computed: {
    onRoutes(e) {
      return "/" + this.$route.path.split("/").reverse()[0];
    },
  },
  data() {
    return {
      collapse: false,
      show: false,
      
    };
  },
  mounted() {
    if (this.$route.path == "/home") this.show = true;
  },
  methods: {
    onselect() {
      this.show = false;
    },
    go_home() {
      this.show = true;
      this.$router.push("/home");
    },
  },
};
</script>
<style scoped>
.sidebar-active1 {
  color: #345d99 !important;
}

.sidebar-active {
  background: #c0daff !important;
  color: #3f669f !important;
}

.sidebar-el-menu:not(.el-menu--collapse) {
  width: 200px;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-one {
  background: #0c4ca3 !important;
}
.sidebar-one:hover {
  background: rgb(51, 98, 164) !important;
}

.sidebar-el-menu:not(.el-menu--collapse) {
  width: 200px;
}
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 50px;
  bottom: 0;
  overflow-y: scroll;
  background: #0c4ca3;
  width: 200px;
  overflow: hidden;
}
.activehome {
  background: #c0daff;
  color: #4f5155 !important;
}
.activehome > span {
  color: #4f5155 !important;
}
.home {
  width: 100%;
  height: 40px;
  line-height: 42px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}
.home > i {
  margin-left: 5px;
}
.home > span {
  color: #ffffff;
  font-size: 14px;
  margin-right: 50px;
  margin-left: 10px;
}
</style>